/* BASIC RESET */
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,macbook,p,blockquote,fieldset,input{margin:0; padding:0;}

/* HTML ELEMENTS */
body { background: -moz-radial-gradient(#99FF66,#000); background: -webkit-gradient(radial, center center,10,center center,1000, from(#99FF66), to(#000)); color:#555; background-color:#151f23; }
h1 { font: bold 50px Helvetica, Arial, Sans-serif; text-align: center; color: #eee; text-shadow: 0px 2px 6px #333; }
h1 small{ font-size: 20px; text-transform:uppercase; letter-spacing: 14px; display: block; color: #ccc; margin-top:10px; }
h2 a { display: block; text-decoration: none; margin: 0 0 30px 0; font: italic 40px Georgia, Times, Serif;  text-align: center; color: #bfe1f1; text-shadow: 0px 2px 6px #333; }
h2 a:hover { color: #90bcd0; }

/* COMMON CLASSES */
.break { clear:both; }

/* WRAPPER */
#wrapper { width:800px; margin:40px auto; }

/* CONTENT */
#content { }
#content h2 { font: bold 30px Helvetica, Arial, Sans-serif; color:#eee; text-shadow: 0px 2px 6px #333; margin-left:400px; padding-top:20px; }

/* BAR CHART */
#bar { list-style:none; margin:70px 0 0 200px; width:400px; }
#bar li { margin-top:-40px; }

/* First top should have a different colour */
#bar li:first-child div.top { background-color:rgba(186,211,215,0.5); }

/* Last bottom should have a shadow */
#bar li:last-child div.bottom { -moz-box-shadow: 0 10px 10px hsla(0,0%,0%,.2); -webkit-box-shadow: 0 100px 30px hsla(0,0%,0%,.2); box-shadow: 0 100px 30px hsla(0,0%,0%,.2); }

/* Ellipse top */
#bar li div.top { background-color:rgba(140,172,176,0.5); position:relative;
	width:100px; height:40px; -moz-border-radius: 100px/40px; -webkit-border-radius: 100px 40px; border-radius: 100px/40px; }
#bar li div.top img { margin-left:18px; margin-top:-32px; display:none; }

/* Bar bottom */
#bar li div.bottom { background-color:rgba(184,203,205,0.5); margin-top:-40px; position:relative;
	width:100px; -moz-border-radius: 100px/40px; -webkit-border-radius: 100px 40px; border-radius: 100px/40px; }
#bar li div.bottom div.infobox { padding:40px 0 0 200px; }
#bar li div.bottom div.infobox h3 { font-family:Georgia,serif,Times; }
#bar li div.bottom div.infobox p { font-family:"Lucida Grande",Arial,Helvetica,Sans-Serif; }

#bar li div.bottom div.btnbox {  padding:40px 0 0 200px; }
#bar li div.bottom div.btnbox h3 { font-family:Georgia,serif,Times; }
#bar li div.bottom div.btnbox p { font-family:"Lucida Grande",Arial,Helvetica,Sans-Serif; }


/* General hover actions */
#bar li:hover div.top img { display:inline; }
#bar li:hover div.bottom div.infobox { color:#eee; text-shadow: 0px 5px 5px #111; }

#bar li div.bottom div.btnbox { color:#eee; text-shadow: 0px 5px 5px #111; }



/* Vaquita bar */
#vaquita div.top { z-index:91; }
#vaquita div.bottom { z-index:90; height:520px; }
#vaquita:hover div.top { z-index:991; background-color:#3f1150; }
#vaquita:hover div.bottom { z-index:990; background-color:#3366FF;
	background:-moz-linear-gradient(-90deg, #3366FF, #000099); background:-webkit-gradient(linear, 0 top, 0 bottom, from(#3366FF), to(#000099)); }